<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画图片</title>
    <script src="min_jq/min.js"></script>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
        #roll{
            width: 30px;
            height: 30px;
            border: solid 1px yellow;
            background-color: yellow;
            border-radius: 50%;
            position: absolute;
            left: 100px;
            bottom: 100px;
        }

    </style>
</head>
<body>
    <img id="img" src="汉服美人.png" alt="">
    <div>
        <button id="btn">隐藏</button>
    </div>
    <div id="roll"></div>
    <div>
        <button id="btn1">移动</button>
    </div>
</body>
    <script>
        // 图片显示或隐藏
        $("#btn").on("click",function (){
            if($("#btn").text()==="隐藏"){
                $("#img").fadeOut(2000,function (){$("#btn").text("显示")})
            }
            else{
                $("#img").fadeIn(2000,function (){$("#btn").text("隐藏")})
            }
        })
        // 移动小球
        $("#btn1").on("click",function(){
            $("#roll").animate({left:"200px"},2000)
            setTimeout(function (){
            $("#roll").animate({bottom:"100px"},2000)
        })
            setTimeout(function (){
            $("#roll").animate({left:"100px"},2000)
        })

        })

        $(function (){
            alert("页面加载完成")
        })

    </script>
</html>